<template>
  <a-drawer v-model:visible="LAYER.visible" :title="LAYER.title" :width="LAYER.width"
            :closable="LAYER.closable" :mask-closable="LAYER.maskClosable" :esc-to-close="LAYER.escToClose"
            :unmount-on-close="LAYER.unmountOnClose" :footer="LAYER.footer" :ok-text="LAYER.okText"
            :ok-loading="LAYER.okLoading" :cancel-text="LAYER.cancelText" :on-before-ok="onSubmit" @close="onCancel">
    <!--表单开始-->

    <a-form ref="formRef" :model="formState" layout="vertical" :rules="RULES">
      <a-row :gutter="[12,12]">
        <a-col :span="12">
          <a-form-item label="食物代码" field="code">
            <a-input v-model="formState.code" placeholder="请填写商品代码" :disabled="isUpdate"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="食物名称" field="name">
            <a-input v-model="formState.name" placeholder="请填写食物名称"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="标准售价" field="price">
            <a-input-number :min="1"  :max="10000" v-model="formState.price" placeholder="请填写售价金币">
              <template #append>金币</template>
            </a-input-number>


          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="显示排序值" field="sort" tooltip="升序排序 显示值越小 显示越靠前">
            <a-input-number :min="0" :max="100" v-model="formState.sort" placeholder="请设置食物显示排序值"/>
          </a-form-item>
        </a-col>



        <a-col :span="12">
          <a-form-item label="档案图标" field="icon">
            <a-input v-model="formState.icon" placeholder="请填写图标ID"/>
          </a-form-item>
        </a-col>

        <a-col :span="12">
          <a-form-item label="档案图标">
            <a-button type="primary" @click="onClick">图标ID表</a-button>
            <a-image-preview
                src="https://oss2.wutunbang.com/other/20231030/c48c71b90f49c43d.png"
                v-model:visible="visible"
            />
          </a-form-item>

        </a-col>


        <a-col :span="24">
          <a-form-item label="食物描述" field="description">
            <a-textarea :max-length="200" v-model="formState.description" placeholder="请填写食物描述"/>
          </a-form-item>
        </a-col>

      </a-row>
    </a-form>
    <!--表单结束-->
  </a-drawer>
</template>

<script lang="ts" setup>

import {ref} from "vue";
import {EditDrawer} from '@/libs/core'
import {PROFILE_EDIT,} from "../../resource/form";
import {ProductHttp} from '../../resource/http'


const props = defineProps({record: {type: Object, required: true}})
const emit = defineEmits(['cancel'])
const {BODY, RULES} = PROFILE_EDIT
const visible = ref(false)
const onClick = () => {
  visible.value = true;
};

const {addProfile, updateProfile} = ProductHttp
const config = {tplRecord: BODY, rawRecord: props.record, rowKey: 'id', emit}
const service = new EditDrawer(config).setAddRequest(addProfile).setUpdateRequest(updateProfile)
const {formRef, formState, LAYER, isUpdate, onCancel, onSubmit} = service
LAYER.title = isUpdate ? '修改档案' : '新增档案'


</script>
